<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>

<s:set var="user_info" value="%{#session.USER_INFO}" />
<s:if test="%{#user_info == null}"><jsp:forward page="login.jsp"></jsp:forward></s:if>

<html>
<head>
<title>Manage Calendar</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/ace.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link href="css/trung-style.css" rel="stylesheet" media="screen">
<link rel='stylesheet' href='css/cupertino/jquery-ui.min.css' />
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet'
	media='print' />

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ace.min.js"></script>
<script src='js/moment.min.js'></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script type="text/javascript">
	// xóa email đã đăng ký
	function deleteEmail(emailId,button){
	 	// ko cho user bấm nữa
	    button.setAttribute("disabled", "disabled");
	    $.ajax({
            url: "DeleteEmail.do",
            type: "POST",
            data: {emailId: emailId },
            success: function (data) {
            	if (data.ajaxResult != "Unauthorized"){
            		// mở lại button cho user bấm
            		button.removeAttribute("disabled");	
            		
            		if (data.ajaxResult == 'Success'){
            			var emailRow = $('#emailRow_'+ emailId);
            			var emailList = $('#emailList tbody');
            			emailRow.remove();
            			
            			if (emailList.html().trim() == ''){
            				emailList.html('Không còn email nào!');
            			}
            			
	            	} else {
		            	alert('Không thể xóa email này!');
	            	}
            	} else {
            		window.location.href = "Index.do";
            	}
            },
            error: function (data) {
                alert("fail");
            }
        });
	}
	</script>
</head>
<body>

	<div class="index">
		<!--header -->
		<tag:HeaderTag username="${user_info.fullname}">
			<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
				<ul class="breadcrumb" style="margin: 8px;">
					<li><i class="icon-home home-icon"></i><a href="./">Trang
							chủ</a></li>
					<li class="active">Thiết lập</li>
				</ul>
				<!-- .breadcrumb -->
			</div>
		</tag:HeaderTag>
		<!--end header -->

		<!-- main body -->
		<tag:SideBarTag active_area="0"></tag:SideBarTag>

		<div class="main-content">			
			<div class="page-header">
				<h1>Thiết lập</h1>
			</div>
			<div class="page-content">
			<tag:MessageAlertTag></tag:MessageAlertTag>
			<div class="row">
				<div class="col-xs-8">
				<!--Event Tab -->
				<div class="tab-event" style="width: 100%; margin: auto;">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#confirmedEmail" data-toggle="tab">Xác nhận email</a>
						</li>
						<li><a href="#syncSetting" data-toggle="tab">Thiết lập đồng bộ</a></li>
					</ul>

					<!-- Tab panes -->
					<div class="tab-content">
						<!-- Tab Event Today -->
						<div class="tab-pane active" id="confirmedEmail">
							<div class="row">
								<div class="col-xs-12">
									<div class="table-responsive">
										<!-- bang cac email da xac nhan -->
										<div class="panel panel-info" style="width: 500px;">
											<div class="panel-heading">Danh sách các tài khoản
												email được cho phép đồng bộ lịch</div>
											<div class="panel-body">
												<table class="table table-hover middleTd" id="emailList">
													<s:set var="email_list" value="%{#request.EMAIL_LIST}"></s:set>
													<s:if test="%{#email_list != null}">
														<s:if test="%{#email_list.isEmpty()}">Chưa có email nào!</s:if>
														<s:else>
															<s:iterator value="%{#email_list}" var="item"
																status="counter">
																<s:set var="tokenLength"
																	value="%{#item.refreshToken.length()}"></s:set>
																<tr id="emailRow_${item.emailId}">
																	<td><s:property value="%{#counter.count}" /></td>
																	<td><s:property value="%{#item.email}" /></td>
																	<s:if test="%{#item.refreshToken != null}">
																		<s:if test="%{#tokenLength > 0}">
																			<td><span class="label label-success">Đã
																					xác nhận</span></td>
																			<td></td>
																		</s:if>
																		<s:else>
																			<td><span class="label label-warning">Chưa
																					xác nhận</span></td>
																			<td>
																				<form method="post" action="AcceptPermission.do">
																					<input type="hidden" name="email"
																						value="${item.email}">
																					<button type="submit" class="btn btn-xs btn-link">Xác
																						nhận lại</button>
																				</form>
																			</td>
																		</s:else>
																	</s:if>
																	<s:else>
																		<td><span class="label label-warning">Chưa
																				xác nhận</span></td>																		
																	</s:else>
																	<td>
																		<button class="btn btn-danger btn-sm"
																			onclick="deleteEmail('${item.emailId}', this)">
																			Xóa
																		</button>
																	</td>
																</tr>
															</s:iterator>
														</s:else>
													</s:if>
													<s:else>
														Chưa có email nào!
													</s:else>
												</table>
											</div>
										</div>
										<!-- Form xac nhan them email -->
										<form action="AcceptPermission.do">
											<table style="width: 400px;">
												<tbody>
													<tr>
														<td>Thêm Email</td>
														<td><input type="email" class="form-control"
															name="email" id="email" placeholder="Nhập email..."></td>
														<td>
															<button type="submit" class="btn btn-sm btn-success">Xác
																nhận</button>
														</td>
													</tr>
												</tbody>
											</table>
										</form>
									</div>
									<!-- /.table-responsive -->
								</div>
								<!-- /span -->
							</div>
						</div>
						<!-- End Tab Event Today -->

						<!-- Tab Event Next -->
						<div class="tab-pane " id="syncSetting">
							<div class="row">
								<div class="col-xs-12">
									<div class="table-responsive">
										<!-- Thong tin phan Setting -->
										<s:set var="setting" value="%{#request.SETTING}"></s:set>
										<form action="ChangeSetting.do">
											<table style="width: 400px;">
												<tbody>
													<tr>
														<td>Tự động đồng bộ</td>
														<td><select name="isAutoSync">
																<option value="true"
																	<c:if test="${setting.isAutoSync == true}">selected="selected"</c:if>>Bật</option>
																<option value="false"
																	<c:if test="${setting.isAutoSync == false}">selected="selected"</c:if>>Tắt</option>
														</select></td>
													</tr>
													<tr>
														<td>Tự đồng bộ sau</td>
														<td>
															<div class="input-prepend input-append">
																<input class="span2" name="syncAfter" type="number"
																	value="${setting.syncAfter}" min="15" max="120">
																<span class="add-on">phút</span>
															</div>
														</td>
													</tr>
													<tr>
														<td></td>
														<td></td>
													</tr>
												</tbody>
											</table>
											<button type="submit" class="btn btn-sm btn-primary">Lưu
												lại</button>
										</form>
									</div>
									<!-- /.table-responsive -->
								</div>
								<!-- /span -->
							</div>
						</div>
						<!-- Tab Event Next -->

					</div>
				</div>
				<!-- End Event Tab -->
			</div>
			</div>

			</div>
		</div>
		<!-- end body -->
	</div>

</body>

</html>